<!-- 教师管理详情 -->
<template>
  <el-card>
    <template #header>
      <el-button @click="$router.go(-1)">返回</el-button>
    </template>
    <div>
      <el-descriptions title="教师详情" direction="vertical" :column="4" border>
        <el-descriptions-item label="教师名称">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item label="教师资质">
          <el-image v-for="i in certification" 
                :key="i"
                :src="img + '/' + i" 
                style="width: 150px; height: 150px"
                :preview-src-list="[img + '/' + i]"
                lazy
            ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="相关证书">
          <el-image v-for="i in urls" 
                :key="i"
                :src="img + '/' + i" 
                style="width: 150px; height: 150px"
                :preview-src-list="[img + '/' + i]"
                lazy
            ></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="教师照片">
          <el-image  style="width: 150px; height: 150px" :src="img + '/' + form.photos" :preview-src-list="[img + '/' +form.photos]"></el-image>
        </el-descriptions-item>
        <el-descriptions-item label="教师介绍">{{ form.description }}</el-descriptions-item>
      </el-descriptions>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "teacherDetail",
  data(){
    return{
        form:{},
        img: window.api.image,
        src:'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        urls: null,
        certification:null,
    }
  },
  methods:{
    
  },
  mounted() {
    // this.getDetail();
    if (this.$route.query.id) {
      this.API.getRecoveryTeacherById({ id: this.$route.query.id }).then(
        (ret) => {
          this.form = ret.data;
          this.urls = this.form.credential.split(',');
          this.certification = this.form.certification.split(',');
          console.log('for;',this.urls);
        }
      );
    }
  }
}
</script>